<xsl:stylesheet version="1.1"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"                
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
            
	<xsl:param name="foreground-color">#FFFFFF</xsl:param>
	<xsl:param name="background-color">#000000</xsl:param>
	<xsl:param name="outline-color">#0000FF</xsl:param>
	<xsl:param name="font-size">50</xsl:param>
	<xsl:param name="cap-width">640</xsl:param>
	<xsl:param name="cap-height">520</xsl:param>
	<xsl:param name="margin">20</xsl:param>
	<xsl:param name="line-width">30</xsl:param>
	<xsl:param name="outline-width">14</xsl:param>
	<xsl:param name="line-gap">20</xsl:param>
	<xsl:param name="t-height">85</xsl:param>
	<xsl:param name="o-height">60</xsl:param>
	<xsl:param name="s-height">90</xsl:param>
	<xsl:param name="letter-gap">40</xsl:param>
	<xsl:param name="letter-edge">20</xsl:param>
	<xsl:param name="name-gap">60</xsl:param>
	<xsl:param name="main-font-height">60</xsl:param>
	<xsl:param name="sub-font-height">20</xsl:param>
	<xsl:param name="font-face">Arial</xsl:param>
	<xsl:param name="line-height">24</xsl:param>	
	
	<xsl:param name="personalisation"/>
	<xsl:param name="personalisation-color" select="$foreground-color"/>

  	<xsl:output method="xml"/>
  
  	<xsl:template match="/">
    	<xsl:variable name="width" select="$cap-width * 3 + $margin * 2"/>
    	<xsl:variable name="height" select="$cap-height * 2 + $margin * 2"/>

		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}" version="1.1">
			<defs>
				<marker id="foreground-triangle"
			      viewBox="0 0 {$line-width} {$line-width}" refX="{$line-width - 1}" refY="{$line-width div 2}" 
			      markerUnits="strokeWidth"
			      markerWidth="1" markerHeight="1"
			      orient="auto">
		      		<path d="M {$line-width} -1 L 0 {$line-width div 2} L {$line-width} {$line-width}" stroke="none" fill="{$foreground-color}" stroke-width="1"/>
				</marker>
				<marker id="outline-triangle"
			      viewBox="0 0 {$line-width} {$line-width}" refX="{$line-width - 1}" refY="{$line-width div 2}" 
			      markerUnits="strokeWidth"
			      markerWidth="1" markerHeight="1"
			      orient="auto">
		      		<path d="M {$line-width} -1 L 0 {$line-width div 2} L {$line-width} {$line-width}" stroke="none" fill="{$outline-color}" stroke-width="1"/>
				</marker>
				<marker id="outline-cap-end"
			      viewBox="0 0 {$outline-width} {$line-width + $outline-width}" refX="{$outline-width div 2}" refY="{($line-width + $outline-width + 1.5) div 2}" 
			      markerUnits="strokeWidth"
			      markerWidth="1" markerHeight="1"
			      orient="auto">
					<rect x="0" y="0" width="{$outline-width}" height="{$line-width + $outline-width}" fill="{$outline-color}" stroke="none"/>
				</marker>
				<marker id="outline-cap-start"
			      viewBox="0 0 {$outline-width} {$line-width + $outline-width}" refX="{$outline-width div 2}" refY="{($line-width + $outline-width - 1.5) div 2}" 
			      markerUnits="strokeWidth"
			      markerWidth="1" markerHeight="1"
			      orient="auto">
					<rect x="0" y="0" width="{$outline-width}" height="{$line-width + $outline-width}" fill="{$outline-color}" stroke="none"/>
				</marker>
			</defs>		
	    	<g>
	    		<rect x="0" y="0" width="{$width}" height="{$height}" fill="gray" stroke="none"/>
	    		<g>
		    		<xsl:call-template name="back"/>
		    		<text x="0" y="{$cap-height + $margin}" baseline-shift="0%" font-size="{$margin}">Wearer's Back</text>
	    		</g>
	    		<g transform="translate(0, {$cap-height + $margin})">
	    			<xsl:call-template name="front"/>
		    		<text x="0" y="{$cap-height + $margin}" baseline-shift="0%" font-size="{$margin}">Wearer's Front (any personalised text should be centred at bottom)</text>
	    		</g>
	    		<g transform="translate({$cap-width + $margin}, 0)">
	    			<xsl:call-template name="right"/>
		    		<text x="0" y="{$cap-height + $margin}" baseline-shift="0%" font-size="{$margin}">Wearer's Right</text>
	    		</g>
	    		<g transform="translate({$cap-width + $margin}, {$cap-height + $margin})">
	    			<xsl:call-template name="left"/>
		    		<text x="0" y="{$cap-height + $margin}" baseline-shift="0%" font-size="{$margin}">Wearer's Left</text>
	    		</g>
	    		<g transform="translate({($cap-width + $margin) * 2}, 0)">
	    			<xsl:call-template name="top"/>
		    		<text x="0" y="{$cap-height + $margin}" baseline-shift="0%" font-size="{$margin}">Wearer's Top</text>
	    		</g>
	    		<g transform="translate({($cap-width + $margin)*2}, {$cap-width + $margin})">
	    			<g transform="scale({($cap-height * 2 - $cap-width) div ($cap-height * 2 + $cap-width)})">
		    			<xsl:call-template name="assembled"/>
			    	</g>
	    		</g>
				<xsl:call-template name="color-block">
					<xsl:with-param name="x" select="$width - $margin"/>
					<xsl:with-param name="y" select="$height - $margin"/>
					<xsl:with-param name="color" select="$outline-color"/>
					<xsl:with-param name="label">Outline</xsl:with-param>
				</xsl:call-template>
				<xsl:call-template name="color-block">
					<xsl:with-param name="x" select="$width - $margin"/>
					<xsl:with-param name="y" select="$height - $margin - $line-height * 2"/>
					<xsl:with-param name="color" select="$foreground-color"/>
					<xsl:with-param name="label">Foreground</xsl:with-param>
				</xsl:call-template>
				<xsl:call-template name="color-block">
					<xsl:with-param name="x" select="$width - $margin"/>
					<xsl:with-param name="y" select="$height - $margin - $line-height * 4"/>
					<xsl:with-param name="color" select="$background-color"/>
					<xsl:with-param name="label">Background</xsl:with-param>
				</xsl:call-template>
	    		
	        </g>
		</svg>	  
  	</xsl:template>

  	<xsl:template name="color-block">
  		<xsl:param name="x"/>
  		<xsl:param name="y"/>
  		<xsl:param name="color"/>
  		<xsl:param name="label"/>
  		<rect x="{$x - $line-height}" y="{$y - $line-height}" width="{$line-height}" height="{$line-height}" fill="{$color}" stroke="black"/>
  		<text x="{$x - $line-height * 2}" y="{$y}" baseline-shift="0%" font-size="{$line-height}" text-anchor="end"><xsl:value-of select="$label"/> (<xsl:value-of select="$color"/>)</text>
  	</xsl:template>
  	
  	<xsl:template name="assembled">
  		<g transform="translate({$cap-height + $cap-width},{$cap-height})">
  			<g transform="rotate(180)">
  				<xsl:call-template name="back"/>
  			</g>
  		</g>
  		<g transform="translate({$cap-height}, {$cap-height})">
  			<xsl:call-template name="top"/>
  		</g>
  		<g transform="translate({$cap-height}, {$cap-height})">
  			<g transform="rotate(90)">
  				<xsl:call-template name="right"/>
  			</g>
  		</g>
  		<g transform="translate({$cap-height + $cap-width}, {$cap-height + $cap-width})">
  			<g transform="rotate(270)">
  				<xsl:call-template name="left"/>
  			</g>
  		</g>
  		<g transform="translate({$cap-height}, {$cap-height + $cap-width})">
  			<xsl:call-template name="front"/>
  		</g>
  	</xsl:template>

  	
  	<xsl:template name="top">
 		<rect x="0" y="0" width="{$cap-width}" height="{$cap-width}" fill="{$background-color}" stroke="none"/>
  		<xsl:variable name="left-x" select="($cap-width - $line-gap - $line-width) div 2"/>
  		<xsl:variable name="right-x" select="($cap-width + $line-gap + $line-width) div 2"/>
  		<defs>
	  		<line id="l1x" x1="{$left-x}" y1="0" x2="{$left-x}" y2="{$cap-width}"/>
	  		<line id="l2x" x1="{$right-x}" y1="0" x2="{$right-x}" y2="{$cap-width}"/>
  		</defs>

  		<use xlink:href="#l1x" stroke="{$outline-color}" stroke-width="{$line-width + $outline-width}" fill="none"/>
  		<use xlink:href="#l2x" stroke="{$outline-color}" stroke-width="{$line-width + $outline-width}" fill="none"/>
  		
  		<use xlink:href="#l1x" stroke="{$foreground-color}" stroke-width="{$line-width}" fill="none"/>
  		<use xlink:href="#l2x" stroke="{$foreground-color}" stroke-width="{$line-width}" fill="none"/>

  	</xsl:template>
  	
  	<xsl:template name="back">
  		<xsl:call-template name="background"/>
  		<defs>
  			<clipPath id="rect">
  				<rect id="rect" x="0" y="0" width="{$cap-width}" height="{$cap-height}"/>
  			</clipPath>
  		</defs>  		
  		<g clip-path="url(#rect)">
	  		<g transform="translate({-$cap-width * 1.5}, 0)">
	  			<xsl:call-template name="wave"/>
	  		</g>
		</g>
 		<g clip-path="url(#rect)">
 			<g transform="scale(-1, 1)">
		  		<g transform="translate({-$cap-width * 2.5}, 0)">
		  			<xsl:call-template name="wave"/>
		  		</g>
	  		</g>
		</g>
  		<g transform="translate(0,{$cap-height})">
			<g transform="scale(1, -1)">
		  		<xsl:variable name="left-x" select="($cap-width - $line-gap - $line-width) div 2"/>
		  		<xsl:variable name="right-x" select="($cap-width + $line-gap + $line-width) div 2"/>
		  		<defs>
			  		<line id="l1" x1="{$left-x}" y1="{$line-width + $outline-width}" x2="{$left-x}" y2="{$cap-height}"/>
			  		<line id="l2" x1="{$right-x}" y1="{$line-width + $outline-width}" x2="{$right-x}" y2="{$cap-height}"/>
		  		</defs>
		
		  		<use xlink:href="#l1" stroke="{$outline-color}" stroke-width="{$line-width + $outline-width}" fill="none" marker-start="url(#outline-triangle)"/>
		  		<use xlink:href="#l2" stroke="{$outline-color}" stroke-width="{$line-width + $outline-width}" fill="none" marker-start="url(#outline-triangle)"/>
		  		
		  		<use xlink:href="#l1" stroke="{$foreground-color}" stroke-width="{$line-width}" fill="none" marker-start="url(#foreground-triangle)"/>
		  		<use xlink:href="#l2" stroke="{$foreground-color}" stroke-width="{$line-width}" fill="none" marker-start="url(#foreground-triangle)"/>
		  		
				<!--   		
		  		<line x1="{$left-x}" y1="{$line-width}" x2="{$left-x}" y2="{$cap-height}" stroke="{$foreground-color}" stroke-width="{$line-width}" marker-start="url(#Triangle)"/>
		  		<line x1="{$right-x}" y1="{$line-width}" x2="{$right-x}" y2="{$cap-height}" stroke="{$foreground-color}" stroke-width="{$line-width}" marker-start="url(#Triangle)"/>
		  		 -->
		  		<!-- 
		  		<g transform="translate({$left-x}, {$cap-height div 2})">
		  			<text x="0" y="{$line-width div 2}" baseline-shift="50%" font-family="Herculanum" font-size="{$line-width}" fill="{$background-color}" transform="rotate(90)" text-anchor="middle">GREX ABNATARE TAMARAMA OCEANUS</text>
		  		</g>
		  		<g transform="translate({$right-x}, {$cap-height div 2})">
		  			<text x="0" y="{$line-width div 2}" baseline-shift="50%" font-family="Herculanum" font-size="{$line-width}" fill="{$background-color}" transform="rotate(-90)" text-anchor="middle">TAMARAMA OCEAN SWIM SQUAD</text>
		  		</g>
		  		 -->
		  	</g>
		</g>
  	</xsl:template>
  	
  	<xsl:template name="front">
  		<xsl:variable name="left-x" select="($cap-width - $line-gap - $line-width) div 2"/>
  		<xsl:variable name="right-x" select="($cap-width + $line-gap + $line-width) div 2"/>
  		<defs>
	  		<path id="p1" d="M {$left-x} 0 L {$left-x} {$cap-height - $t-height - $o-height - $s-height * 2 - $letter-gap * 4 - $name-gap - ($line-gap + $line-width + $letter-edge) div 2} l {-$letter-edge * 2} 0 l 0 {($line-gap + $line-width) div 2} l {$letter-edge * 1} {($line-gap + $line-width) div 2} l {$letter-edge} {0} l 0 {$t-height - $line-gap - $line-width + $letter-gap} l {-$letter-edge} {$o-height div 2} l {$letter-edge} {$o-height div 2} l 0 {$letter-gap} l {-$letter-edge div 2} {$letter-edge div 2}"/>
	  		<path id="p2" d="M {$right-x} 0 L {$right-x} {$cap-height - $t-height - $o-height - $s-height * 2 - $letter-gap * 4 - $name-gap - ($line-gap + $line-width + $letter-edge) div 2} l {$letter-edge * 2} 0 l 0 {($line-gap + $line-width) div 2} l {-$letter-edge * 1} {($line-gap + $line-width) div 2} l {-$letter-edge} {0} l 0 {$t-height  - $line-gap - $line-width + $letter-gap} l {$letter-edge} {$o-height div 2} l {-$letter-edge} {$o-height div 2} l 0 {$letter-gap} l {$letter-edge div 2} {$letter-edge div 2} l {-($line-gap + $line-width + $letter-edge)} {$s-height - $letter-edge} l {$letter-edge div 2} {$letter-edge div 2} l 0 {$letter-gap} l {-$letter-edge div 2} {$letter-edge div 2}"/>
	  		<path id="p3" d="M {$right-x + $letter-edge div 2} {$cap-height - $s-height - $letter-gap * 2 - $letter-edge div 2 - $name-gap - ($line-gap + $line-width + $letter-edge) div 2} l {-$letter-edge div 2} {$letter-edge div 2} l 0 {$letter-gap} l {$letter-edge div 2} {$letter-edge div 2} l {-($line-gap + $line-width + $letter-edge)} {$s-height - $letter-edge} l {($line-gap + $line-width + $letter-edge) div 2} {($line-gap + $line-width + $letter-edge) div 2} l {($line-gap + $line-width + $letter-edge) div 2} {-($line-gap + $line-width + $letter-edge) div 2}"/>
  			<clipPath id="rect">
  				<rect id="rect" x="0" y="0" width="{$cap-width}" height="{$cap-height}"/>
  			</clipPath>  		  			
  		</defs>
 		<xsl:call-template name="background"/>
  		<g clip-path="url(#rect)">
	  		<g transform="translate({$cap-width div 2}, 0)">
	  			<xsl:call-template name="wave"/>
	  		</g>
		</g>
  		<g clip-path="url(#rect)">
	  		<g transform="translate({$cap-width div 2}, 0)">
	  			<g transform="scale(-1, 1)">
	  				<xsl:call-template name="wave"/>
	  			</g>
	  		</g>
		</g>
 		
  		<use xlink:href="#p1" stroke="{$outline-color}" stroke-width="{$line-width + $outline-width}" fill="none" marker-end="url(#outline-cap-end)"/>
  		<use xlink:href="#p2" stroke="{$outline-color}" stroke-width="{$line-width + $outline-width}" fill="none" marker-end="url(#outline-cap-end)"/>
  		<use xlink:href="#p3" stroke="{$outline-color}" stroke-width="{$line-width + $outline-width}" fill="none" marker-start="url(#outline-cap-end)" marker-end="url(#outline-cap-start)"/>
  		
  		<use xlink:href="#p1" stroke="{$foreground-color}" stroke-width="{$line-width}" fill="none"/>
  		<use xlink:href="#p2" stroke="{$foreground-color}" stroke-width="{$line-width}" fill="none"/>
  		<use xlink:href="#p3" stroke="{$foreground-color}" stroke-width="{$line-width}" fill="none"/>
  		<xsl:if test="$personalisation">
  			<text x="{$cap-width div 2}" y="{$cap-height}" baseline-shift="100%" font-family="Verdana" font-size="{$name-gap}" font-weight="bold" fill="{$personalisation-color}" text-anchor="middle"><xsl:value-of select="$personalisation"/></text>  			
  		</xsl:if>
  	</xsl:template>
  	
  	<xsl:template name="left">
  		<xsl:call-template name="background"/>
  		<defs>
  			<clipPath id="rect">
  				<rect id="rect" x="0" y="0" width="{$cap-width}" height="{$cap-height}"/>
  			</clipPath>  		
  		</defs>
  		<g clip-path="url(#rect)">
	  		<g transform="translate({-$cap-width div 2}, 0)">
	  			<xsl:call-template name="wave"/>
	  		</g>
		</g>
  		<g transform="translate({$cap-width div 2}, {$cap-height * 0.5})">
  			<text x="0" y="0" baseline-shift="100%" font-family="{$font-face}" font-size="{$main-font-height}" font-weight="bold" fill="{$foreground-color}" stroke="none" stroke-width="{$outline-width div 4}" text-anchor="middle">Tamarama</text>
  		</g>
  		<g transform="translate({$cap-width div 2}, {$cap-height * 0.5 + $sub-font-height})">
  			<text x="0" y="0" baseline-shift="0%" font-family="{$font-face}" font-size="{$sub-font-height}" font-weight="bold" fill="{$foreground-color}" text-anchor="middle">SURF LIFE SAVING CLUB</text>
  		</g>
  	</xsl:template>

  	<xsl:template name="right">
  		<xsl:call-template name="background"/>
  		<defs>
  			<clipPath id="rect">
  				<rect id="rect" x="0" y="0" width="{$cap-width}" height="{$cap-height}"/>
  			</clipPath>  		
  		</defs>
  		<g clip-path="url(#rect)">
	  		<g transform="translate({$cap-width * 1.5}, 0)">
	  			<g transform="scale(-1, 1)">
	  				<xsl:call-template name="wave"/>
	  			</g>
	  		</g>
		</g>
  		
  		<g transform="translate({$cap-width div 2}, {$cap-height * 0.5})">
  			<text x="0" y="0" baseline-shift="100%" font-family="{$font-face}" font-size="{$main-font-height}" font-weight="bold" fill="{$foreground-color}" stroke="none" stroke-width="{$outline-width div 4}" text-anchor="middle">Tamarama</text>
  		</g>
  		<g transform="translate({$cap-width div 2}, {$cap-height * 0.5 + $sub-font-height})">
  			<text x="0" y="0" baseline-shift="0%" font-family="{$font-face}" font-size="{$sub-font-height}" font-weight="bold" fill="{$foreground-color}" text-anchor="middle">OCEAN SWIM SQUAD</text>
  		</g>
  	</xsl:template>
  	
  	<xsl:template name="background">
  		<rect x="0" y="0" width="{$cap-width}" height="{$cap-height}" fill="{$background-color}" stroke="none"/>
  	</xsl:template>

	<xsl:template name="wave">
		<xsl:param name="water-color" select="$outline-color"/>
		<xsl:param name="width" select="$cap-width * 2 - ($line-gap + $line-width * 2) * 2"/>
		<xsl:param name="height" select="$cap-height * 0.9"/>
		<path fill="{$water-color}" d="
			M 0 {$height}
			L 0 {$height - $name-gap * 1.1} 
			Q {$width div 6} {$height - $name-gap * 1.1} {$width div 4} {($height - $name-gap * 1.1) div 2} 
			Q {$width div 2.9} 0 {$width div 2.1} 0 
			Q {$width div 2.45} {$height * 0.03} {$width div 2.45} {$height div 4.5} 
			Q {$width div 2.45} {$height * 0.8} {$width} {$height} 
			z" transform="translate(0, {$cap-height - $height})"/>
		 <!-- 
		<path fill="{$water-color}" d="
			M 0 {$height}
			L 0 {$height - $name-gap * 1.1} 
			Q {$width div 4} {$height - $name-gap * 1.1} {$width div 4} {($height - $name-gap * 1.1) div 4} 
			Q {$width div 4} 0 {$width div 6} 0 
			Q {$width * 0.35} 0 {$width div 2} {$height div 2} 
			T {$width} {$height} 
			z" transform="translate(0, {$cap-height - $height})"/>
			 -->
	</xsl:template>
  
</xsl:stylesheet>